<% if @user.badge_achievements_count > 0 %>
  <% number = 60 %>
  <style>
    .badge-achievement{
      display: block;
      position: relative;
      z-index:1;
      color: black;
      opacity: 1 !important;
      float: left;
    }
    .badge-achievement-image{
      width: auto !important;
      max-height: 110px;
      min-height: 10px;
      max-width: 230px;
      border-radius: 50%;
      border: none;
      border-radius: 0px;
      border: 0px !important;
      margin: 3px;
      background: transparent;
    }
    .badge-achievement-info h2{
      font-size: 15px;
    }
    .badge-achievement img:hover{
      opacity:0.88 !important;
    }
    .badge-widget{
      position: relative;
      overflow: auto;
      min-height: 105px;
      overflow: visible;
    }
  </style>
  <div style="overflow: visible;padding-top:20px;">
    <div class="widget-body badge-widget">
      <% @user.badge_achievements.order("id DESC").includes(:badge).each do |achievement| %>
        <a class="badge-achievement" style="<%= "float:right" if achievement.id.digits.first.even? %>" href="/badge/<%= achievement.badge.slug %>">
          <img
            src="<%= cloudinary achievement.badge.badge_image_url, 180 %>"
            alt="<%= achievement.badge.title %>"
            class="badge-achievement-image"
            style="transform: rotate(<%= -25 + (achievement.id.digits.first*5) %>deg);
              margin-left: <%=achievement.id.digits.first*3 %>px;
              margin-right: <%=achievement.id.digits.first*1 %>px;"
              />
        </a>
      <% end %>
    </div>
  </div>
<% end %>